<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入方式</title>
    <!-- 内部样式 -->
    <style>
        /* 选择器语法*/
        /*选择器名{
            样式名:样式值;
            样式名:样式值;
            ....
        }*/
        /*
            基本选择器
            1.id选择器
                #id属性值
                用于匹配当前页面中指定id属性值的元素
                由于id属性值不能重复,因此该方式匹配到的元素有且仅有一个
                如果id属性值重复了,样式也会生效,但是后期在js中操作的时候将不会生效
                因此,开发中不允许出现id属性值相同的元素
            2.class选择器
                .class属性值
                用于匹配当前页面中所有指定class属性值的元素
            3.标签选择器
                标签名
                用于匹配当前页面中所有指定标签的元素
            4.*选择器
                匹配一切
            选择器的优先级问题
                在使用选择器为指定元素赋予样式的时候,可能会存在多种选择器匹配到相同的元素
                id选择器>class选择器>标签选择器>*
                可以通过在样式值后面添加!important破坏优先级
                当某个样式使用了!important,则表示该样式的优先级最高、
         */
        #p1{
            color:green;
            font-size: 30px;
        }
        .c1{
            color: blue;
            font-size: 12px;
        }
        div{
            color: purple;
            font-size: 32px;
        }
        *{
            color:pink;
            /*color:pink!important;*/
            font-size: 20px;
        }
    </style>
    <!--
        外部引入有两种方式
        1.通过link标签进行引入,通过href属性指定外部文件路径
        2.在style标签中通过@import引入
            语法: @import "*.css文件的路径名+文件名"
    -->
<!--    <link rel="stylesheet" href="test.css">-->
    <style>
        @import "test.css";
    </style>
</head>
<body>
<!--
  css引入方式主要有三种方式
  1.行内式,在元素的标签上通过style属性引入样式
    style属性值的格式为"样式名:样式值;样式名:样式值;样式名:样式值;..."
    该样式只能应用于当前元素,如果需要为多个元素设置,比较麻烦
  2.内部样式,可以为当前页面中符合指定规则的多种元素赋予同一组样式
    在head标签中定义一个子标签style
    在style中,通过选择器语法定义样式
  3.外部引入方式
    在外部创建一个*.css文件
    在当前文档中引入这个*.css文件
  引入方式的优先级
    外部引入本质上就是把引入的文件的内容在引入的位置拷贝了一份
    因此,相当于写了两份一样的选择器,只是样式的值不一样。后面的将会覆盖前面的
    即:
        行内式优先级最高,内部样式与外部引入优先级是一样的
        内部样式与外部引入,谁在后,谁生效
-->
<p style="color: red;font-size: 20px;">这是通过行内式引入的样式</p>
<p id="p1" class="c1">这是一个段落</p>
<p class="c1">这是class属性值为c1的元素</p>
<p class="c1">这是class属性值为c1的元素</p>
<p class="c1">这是class属性值为c1的元素</p>
<div class="c1">这是一个div</div>
<div>这是一个div</div>
<div>这是一个div</div>
<span>这是一个span</span>
<span>这是一个span</span>
<span>这是一个span</span>
</body>
</html>